<!DOCTYPE html>
<html  data-layout-decorate="~{fragment/layout}">
<head>
<meta charset="UTF-8">
<title>班级活动附件上传</title>
<script type="text/javascript"  data-th-inline="javascript">
$(function(){
	/* $('#mytable').bootstrapTable({
		sidePagination: "server",
		url : '/table/page'
	}); */
    var data =  {
	    tableParams : {
	    	//toolbar: '#toolbar',  //工具栏的ID
	    	url : 'page'
	    	},
	    	urls : {
	    		delete : 'delete',
	    		update : 'edit',
	    		add : 'edit',
	    		search:'search'
	    	},
	    	queryCondition : {
	    		[# th:if="${param.activityId}"]
	    			activityId:[[${activityId}]],
	    		[/]
	    		title : '',
	    		type : '',
	    		classId : ''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('activityAttachment_table_viv'));	
	
});
function typeformatter(value,row,index){
	return value==null?'':value==0?'照片':'普通文件';
}
function uidformatter(value,row,index){
	if(row.uid){
		return '<a href="download?uid='+value+'">下载</a>';
	}else{
		return "<font color='red'>无照片</font>";
	}

}
function bjChange(value){
	$.post('bjChange',{bjId:value},function(data){
		var $obj=$('#search_activityId');
		$obj.empty();
		$obj.html('<option class="hidden-lg" value="" disable>请选择</option>');
		for(var i=0;i<data.length;i++){
			var option=$('<option/>').val(data[i].value).text(data[i].text);
			$obj.append(option);
		}
		$obj.selectpicker('refresh');
		$obj.selectpicker('val','');
	});
}

</script>
</head>
<body>
	<section data-layout-fragment="content">
	<div id="activityAttachment_table_viv" class="container">
	
		<!-- 查询窗口 -->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	                    <div class="form-group">
	                        <label for="search_classId">班级</label>
	                        <select id="search_classId" class="form-control selectpicker" name="classId" data-bind="value:queryCondition.classId" onchange="bjChange(this.value,this)" >
	                        	<option class="hidden-lg" value="" disable>请选择</option>
	                        	<option data-th-each="bj:${classes}" data-th-value="${bj.id}" data-th-text="${bj.name}">1班</option>
	                        </select>
	                    </div>
	                    <div class="form-group">
	                        <label for="search_activityId">活动名称</label>
	                        <select id="search_activityId" name="activityId" data-bind="value:queryCondition.activityId" class="form-control  selectpicker">
	                        	<option class="hidden-lg" value="" disable>请选择</option>
	                        	<option data-th-each="act:${activities}" data-th-value="${act.id}" data-th-text="${act.name}">活动1</option>
	                        </select>
	                    </div>
	                    
	                    <div class="form-group">
	                        <label for="search_type">附件类型</label>
	                        <select id="search_type" class="form-control  selectpicker" name="type" data-bind="value:queryCondition.type">
	                        	<option class="hidden-lg" value="" disable>请选择</option>
	                        	<option value="0">照片</option>
	                        	<option value="1">普通文件</option>
	                        </select>
	                    </div>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click:queryClick"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click:clearClick"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空</button>
	            	</div>
                </div>
                
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button data-bind="click:addClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
			</button>
			<button data-bind="click:editClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button data-bind="click:deleteClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button>
			<button data-bind="click:searchClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>筛选
			</button>
			
		</div>
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<th data-checkbox="true"></th>
					<th data-field="id" data-visible="false">ID</th>
					<th data-field="className">班级</th>
					<th data-field="activityName">活动名称</th>
					<th data-field="title">附件标题 </th>
					<th data-field="demo">说明 </th>
					<th data-field="type" data-formatter="typeformatter">附件类型 </th>
					<th data-field="creator" data-visible="false">上传人</th>
					<th data-field="fileName" data-visible="false">文件名</th>
					<th data-field="uid" data-formatter="uidformatter">操作</th>
				</tr>
			</thead>
		</table>
	</div>
	</section>
</body>
</html>